<template>
	<view id="remoteDoorOpening">
		<view class="accessControlCard"
			:class="isSelectLab ? 'accessControlCardBG2' : 'accessControlCardBG1'">
			<text class="title">门禁卡</text>
			<view class="roomNameBox" @click="isSelectLab = !isSelectLab">
				<text
					class="roomName">{{ isSelectLab ? '808实验室' : '选择实验室' }}</text>
				<u--image src="/static/remote-door-opening-icons/back.svg"
					width="48rpx" height="36rpx"></u--image>
			</view>
			<view class="doorKeyBox" v-show="isSelectLab">
				<view class="doorKey">
					<u--image src="/static/remote-door-opening-icons/key.svg"
						width="40rpx" height="40rpx"></u--image>
					<text>前门</text>
				</view>
				<view class="doorKey">
					<u--image src="/static/remote-door-opening-icons/key.svg"
						width="40rpx" height="40rpx"></u--image>
					<text>后门</text>
				</view>
			</view>
			<text class="detail" v-show="isSelectLab">详情</text>
		</view>
		<view class="attention">
			<text class="attentionTitle">注意事项</text>
			<view class="attentionTextBox">
				<text>{{`1:此功能为异步远程开门，最大延迟约为10秒。
								 2:为确保安全，发送开门指令后，请等待状态反馈。
								 3:如开门失败，可偿试再次发送开门指令，若放弃继续开门，务必在指令状显示“指令过期”或请访客在2分钟后确认门仍未开启时再离开!`}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'RemoteDoorOpening',
		data() {
			return {
				isSelectLab: false
			}
		}
	}
</script>

<style lang="scss" scoped>
	#remoteDoorOpening {
		height: 100vh;
		background-color: #F6F6F6;
		padding: 18rpx;

		.accessControlCard {
			position: relative;
			width: 100%;
			height: 328rpx;

			.title {
				position: absolute;
				top: 22rpx;
				left: 30rpx;
				color: #202D41;
				font-size: 28rpx;
				font-weight: 500;
			}

			.roomNameBox {
				display: flex;
				position: absolute;
				top: 24rpx;
				right: 0;
				padding-right: 34rpx;

				.roomName {
					font-size: 24rpx;
					color: #6BA5FE;
					margin-right: 12rpx;
				}
			}

			.doorKeyBox {
				position: absolute;
				top: 80rpx;
				left: 170rpx;

				.doorKey {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 384rpx;
					height: 68rpx;
					margin-top: 20rpx;
					background: linear-gradient(214deg, #FFFCEF 0%, #FFF5EC 100%);
					box-shadow: 0px 4px 12px 0px rgba(75, 98, 141, 0.2);
					border-radius: 28rpx;
					
					text {
						color: #FFC678;
						font-size: 36rpx;
						font-weight: 500;
						margin-left: 6rpx;
					}
				}
			}
			
			.detail {
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				color: #999999;
				font-size: 24rpx;
			}
		}

		.accessControlCardBG1 {
			background: url('../../static/images/accessControl1.png') no-repeat;
			background-size: 100% 100%;
		}

		.accessControlCardBG2 {
			background: url('../../static/images/accessControl2.png') no-repeat;
			background-size: 100% 100%;
		}

		.attention {
			margin: 48rpx 14rpx;

			.attentionTitle {
				font-size: 24rpx;
				color: #666666;
			}

			.attentionTextBox {
				font-size: 24rpx;
				color: #F56C6C;
				margin-top: 16rpx;
			}
		}
	}
</style>
